<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东的左侧导航</title>
    <!-- <style>
        p{
            margin: 0;
            padding: 0;
            font-size: 18px;
        }
        .box1{
          margin-top: 215px;
           width: 238px;
           height: 125px;
           border: 1px solid;
        }
    </style> -->
    <style>
            /* 
                设置body
            */
            body{
                /* 设置网页的背景,以使我们方便查看 */
                background-color: #bfa;
            }
            /* 设置菜单外部容器 */
            .left-nav{
                /* 设置宽度 */
                width: 190px;
                height: 450px;
                padding: 10px 0;
                background-color: #fff;
                margin: 50px auto;
            }
            .left-nav .item{
                height: 25px;
                /* 
                    要让一个文字在父元素中居中,只需将父元素line-height设置为一个和父元素height一样的值
                */
                line-height: 25px;
                padding-left: 18px;
                font-size: 12px;
            }
            /* 为item设置一个鼠标移入的状态 */
            .item:hover{
                background-color: #d9d9d9;
               
            }
            .item a:hover{
                color: #c81623;
            }
            /* 
                设置超链接
            */
            .item a{
                /* 设置大小 */
                font-size: 14PX;
                /* 设置字体颜色 */
                color: #333;
                /* 去除下划线 */
                text-decoration: none;
            }
    </style>
</head>

<body>
    <!-- 
        创建一个外部的容器 nav(div) div(div) ul(li)
     -->
    <nav class="left-nav">
        <div class="item">
            <a href="#">家用电器</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>
        </div>
    </nav>
    <!-- <div class="box1">
        <p>家用电器</p>
        <p>手机/运营商/数码</p>
        <p>电脑/办公</p>
        <p>家居/家具/家装/厨具</p>
    </div> -->

</body>

</html>